<template>
    <view class="content">
        <view class="top">
        	<image src="../../static/icon/yun.png" class="icon"></image>
        	<view class="u-flex-1">云课堂</view>
			<u-switch v-model="checked" active-color="#00b7bd" v-if="!disabled"></u-switch>
        </view>
		
		<view class="box">
			<view class="item">
				<view>
					<text style="color: #ff0000;padding-right: 10rpx;">*</text>服务类型
				</view>
				<view class="item-r" @click="open(1)">
					<view class="item-r-text" v-if="cate">{{ cate }}</view>
					<view v-else class="place">请选择</view>
					<u-icon name="arrow-right" color="#b3b3b3" size="28" class="u-m-l-10" v-if="!disabled"></u-icon>
				</view>
			</view>
			<view class="item">
				<view>
					<text style="color: #ff0000;padding-right: 10rpx;">*</text>省市
				</view>
				<view class="select" v-if="!disabled">
				    <pick-regions @getRegion="handleGetRegion">
				        <view class="adr-box">
				            <view v-if="region.length > 0">{{ region[0].name }}{{ region[1].name }}</view>
				            <view v-else class="place">请选择省市</view>
				        </view>
				    </pick-regions>
					<u-icon name="arrow-right" color="#b3b3b3" size="28" class="u-m-l-5"></u-icon>
				</view>
				
				<view class="item-r" v-else>
					{{ region[0].name }}{{ region[1].name }}
				</view>
			</view>
			<view class="item">
				<view>
					<text style="color: #ff0000;padding-right: 10rpx;">*</text>培训日期
				</view>
				<view class="item-r" @click="open(3)">
					<view class="item-r-text" v-if="date">{{ date }}</view>
					<view v-else class="place">请选择</view>
					<u-icon name="arrow-right" color="#b3b3b3" size="28" class="u-m-l-10" v-if="!disabled"></u-icon>
				</view>
			</view>
			<view class="item">
				<view>
					<text style="color: #ff0000;padding-right: 10rpx;">*</text>服务时间
				</view>
				<view class="item-r" @click="open(4)">
					<view class="item-r-text" v-if="time">{{ time }}</view>
					<view v-else class="place">请选择</view>
					<u-icon name="arrow-right" color="#b3b3b3" size="28" class="u-m-l-10" v-if="!disabled"></u-icon>
				</view>
			</view>
		</view>
		
		<view v-for="(item, index) in list" :key="index">
			<view class="box">
				<view class="item">
					<view>
						<text style="color: #ff0000;padding-right: 10rpx;">*</text>公司名称
					</view>
					<view class="item-r">
						<input type="text" v-model="item.name" placeholder="请输入公司名称" class="inp" :disabled="disabled">
					</view>
				</view>
				<view class="item">
					<view>
						<text style="color: #fff;padding-right: 10rpx;">*</text>公司地址
					</view>
					<view class="item-r">
						<input type="text" v-model="item.address" placeholder="请输入公司地址" class="inp" :disabled="disabled">
					</view>
				</view>
				<view class="item">
					<view>
						<text style="color: #ff0000;padding-right: 10rpx;">*</text>所属行业
					</view>
					<view class="item-r" @click="openIndustry(item)">
						<view class="item-r-text" v-if="item.industry">{{ item.industry }}</view>
						<view v-else class="place">请选择</view>
						<u-icon name="arrow-right" color="#b3b3b3" size="28" class="u-m-l-10" v-if="!disabled"></u-icon>
					</view>
				</view>
				<view class="item">
					<view>
						<text style="color: #ff0000;padding-right: 10rpx;">*</text>参加人数
					</view>
					<view class="item-r">
						<input type="number" v-model="item.attend_nums" placeholder="请输入参加人数" class="inp" :disabled="disabled">
					</view>
				</view>
				<view class="item border-b">
					<view>
						<text style="color: #fff;padding-right: 10rpx;">*</text>单位人数
					</view>
					<view class="item-r">
						<input type="number" v-model="item.unit_nums" placeholder="请输入单位人数" class="inp" :disabled="disabled">
					</view>
				</view>
				<view class="item">
					<view>
						<text style="color: #ff0000;padding-right: 10rpx;">*</text>协办人
					</view>
					<view class="item-r">
						<input type="text" v-model="item.organizer" placeholder="请输入协办人" class="inp" :disabled="disabled">
					</view>
				</view>
				<view class="item">
					<view>
						<text style="color: #ff0000;padding-right: 10rpx;">*</text>电话
					</view>
					<view class="item-r">
						<input type="number" v-model="item.mobile" placeholder="请输入电话" class="inp" :disabled="disabled">
					</view>
				</view>
				<view class="item">
					<view>
						<text style="color: #ff0000;padding-right: 10rpx;">*</text>性别
					</view>
					<view class="item-r" @click="openSex(item)">
						<view class="item-r-text" v-if="item.sex">{{ item.sex }}</view>
						<view v-else class="place">请选择</view>
						<u-icon name="arrow-right" color="#b3b3b3" size="28" class="u-m-l-10" v-if="!disabled"></u-icon>
					</view>
				</view>
				
				<view class="item border-b">
					<view>
						<text style="color: #fff;padding-right: 10rpx;">*</text>部门
					</view>
					<view class="item-r">
						<input type="text" v-model="item.section" placeholder="请输入部门" class="inp" :disabled="disabled">
					</view>
				</view>
				
				<view class="item">
					<view>
						<text style="color: #fff;padding-right: 10rpx;">*</text>备注
					</view>
					<view class="item-r">
						<input type="text" v-model="item.title" placeholder="请输入备注" class="inp" :disabled="disabled">
					</view>
				</view>
				
				<view class="item">
					<view>
						<text style="color: #fff;padding-right: 10rpx;">*</text>内勤
					</view>
					<view class="item-r" @click="openInside(item)">
						<view class="item-r-text" v-if="item.inside">{{ item.inside }}</view>
						<view v-else class="place">请选择</view>
						<u-icon name="arrow-right" color="#b3b3b3" size="28" class="u-m-l-10" v-if="!disabled"></u-icon>
					</view>
				</view>
				
				<!-- 外勤 -->
				<template v-if="role == 4">
					<view class="item">
						<view>
							<text style="color: #fff;padding-right: 10rpx;">*</text>优惠码
						</view>
						<view class="item-r">
							<view class="item-r-text">{{ item.coupon }}</view>
						</view>
					</view>
					<view class="item">
						<view>
							<text style="color: #fff;padding-right: 10rpx;">*</text>到期时间
						</view>
						<view class="item-r">
							<view class="item-r-text">{{ item.timeStatus == 2 ? '已过期' : item.end_time }}</view>
						</view>
					</view>
				</template>
			</view>
			
			<view class="btns" v-if="role == 4">
				<view class="btn2" @click="delayed(item)">延时</view>
			</view>
			
			<view class="btns" v-if="checked && !disabled">
				<image src="../../static/image/del_2.png" class="del-2" v-if="list.length != 1" @click="del(index)"></image>
				<image src="../../static/image/add.png" class="del-2" @click="add"></image>
			</view>
		</view>
		
		<view class="box" v-if="outsides">
			<view class="item">
				<view>
					<text style="color: #fff;padding-right: 10rpx;">*</text>外勤
				</view>
				<view class="item-r">
					<view class="item-r-text">{{ outsides }}</view>
				</view>
			</view>
		</view>
		
		<template v-if="outsides && (role == 3 || role == 4)">
			<view class="title">
				<view>培训数据统计</view>
			</view>
			<view class="box">
				<view class="item">
					<view>
						<text style="color: #fff;padding-right: 10rpx;">*</text>答题数量
					</view>
					<view class="item-r">
						<view class="item-r-text">{{ data.answer_nums }}</view>
					</view>
				</view>
				<view class="item">
					<view>
						<text style="color: #fff;padding-right: 10rpx;">*</text>下单数量
					</view>
					<view class="item-r">
						<view class="item-r-text">{{ data.order_nums }}</view>
					</view>
				</view>
				<view class="item">
					<view>
						<text style="color: #fff;padding-right: 10rpx;">*</text>支付金额
					</view>
					<view class="item-r">
						<view class="item-r-text">{{ data.count_amount }}</view>
					</view>
				</view>
				<view class="item">
					<view>
						<text style="color: #fff;padding-right: 10rpx;">*</text>退款数量
					</view>
					<view class="item-r">
						<view class="item-r-text">{{ data.refund_nums }}</view>
					</view>
				</view>
			</view>
		</template>
		
		<view class="title">
			<view>选择表单题目</view>
			<view class="c-btn" v-if="!disabled" @click="show_8 = true">选择题目</view>
		</view>
		<view class="q-item" v-for="(item,index) in test" :key="item.id">
			<view class="u-flex">
				<view class="ques">{{item.name}}</view>
				<image src="../../static/icon/del.png" class="del" v-if="!disabled" @click.stop="delQues(index)"></image>
			</view>
			<view class="q-dowm">
				<view class="answer" v-for="(el,ind) in item.answer" :key="ind">
					<image src="../../static/icon/choose_2.png" class="choose-1"></image>
					<view class="answer-text">{{el.name}}</view>
				</view>
			</view>
		</view>
		
		<view class="btn" v-if="!disabled" @click="$u.throttle(doSubmit, 500)">确认提交</view>
		
		<!-- 外勤完成上课 -->
		<view class="btn" v-if="role == 4 && type == 4" @click="$u.throttle(finishWork, 500)">完成上课</view>
		
		<!-- 服务类型 -->
		<u-select v-model="show_1" mode="single-column" :list="cateList"
			value-name="id" label-name="name" @confirm="confirmCate"></u-select>
		<!-- 省市 -->
		<!-- <u-select v-model="show_2" mode="mutil-column-auto" :list="region" child-name="child"
			value-name="id" label-name="name" @confirm="confirmCity"></u-select> -->
		<!-- 培训日期 -->
		<u-picker v-model="show_3" mode="time" @confirm="confirmDate"></u-picker>
		<!-- 服务时间 -->
		<u-select v-model="show_4" mode="mutil-column" :list="timeList" @confirm="confirmTime"></u-select>
		
		<!-- 所属行业 -->
		<u-select v-model="show_5" mode="single-column" :list="industryList"
			value-name="id" label-name="name" @confirm="confirmIndustry"></u-select>
		<!-- 性别 -->
		<u-select v-model="show_6" mode="single-column" :list="sexList" @confirm="confirmSex"></u-select>
		<!-- 内勤 -->
		<u-select v-model="show_7" mode="single-column" :list="insideList"
			value-name="id" label-name="nickname" @confirm="confirmInside"></u-select>
			
		<!-- 选择表单题目 -->
		<u-popup mode="bottom" v-model="show_8" border-radius="30" :closeable="true">
			<view class="pop-up">
				<view class="title u-p-b-20">选择表单题目</view>
				<scroll-view scroll-y style="height: 800rpx;">
					<view>
						<view class="item" v-for="(item, index) in quesList" :key="item.id" @click="chooseQues(item)">
							<image :src="item.isSelect ? '../../static/icon/choose_1.png' : '../../static/icon/choose_2.png'" class="choose-1"></image>
							<view class="pop-ques">{{item.name}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="pop-btn" @click="confirmQuestion">确认提交</view>
			</view>
		</u-popup>
    </view>
</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue';
    export default {
		components: {
		    pickRegions
		},
        data() {
            return {
				checked: true,
				show_1: false,//服务类型
				cateList: [],
				cate: '',
				cateId: '',
				show_2: false,//省市
				region: [],//省市
				show_3: false,//培训日期
				date: '',
				show_4: false,//服务时间
				timeList: [
					[{value:'00',label:'00时'},{value:'01',label:'01时'},{value:'02',label:'02时'},{value:'03',label:'03时'},{value:'04',label:'04时'},{value:'05',label:'05时'},
					 {value:'06',label:'06时'},{value:'07',label:'07时'},{value:'08',label:'08时'},{value:'09',label:'09时'},{value:'10',label:'10时'},{value:'11',label:'11时'},
					 {value:'12',label:'12时'},{value:'13',label:'13时'},{value:'14',label:'14时'},{value:'15',label:'15时'},{value:'16',label:'16时'},{value:'17',label:'17时'},
					 {value:'18',label:'18时'},{value:'19',label:'19时'},{value:'20',label:'20时'},{value:'21',label:'21时'},{value:'22',label:'22时'},{value:'23',label:'23时'}],
					 
					[{value:'00',label:'00分'},{value:'10',label:'10分'},{value:'20',label:'20分'},{value:'30',label:'30分'},{value:'40',label:'40分'},{value:'50',label:'50分'}],
				],
				time: '',
				show_5: false,//所属行业
				industryList: [],
				show_6: false,//性别
				sexList: [{value:'0',label:'女'},{value:'1',label:'男'}],
				sex: '',
				show_7: false,//内勤
				insideList: [],
				show_8: false,//选择表单题目
				quesList: [],
				item: {},
				list: [{name:'',address:'',industry:'',industry_id:'',attend_nums:'',unit_nums:'',organizer:'',mobile:'',sex:'女',
						title:'',section:'',inside:'',inside_id:'',id:0,coupon:''}],
				test: [],
				
				id: '',//编辑id
				outsides: '',//外勤
				disabled: false,
				type: '',
				role: '',//1超级管理员 2人力资源 3内勤 4外勤 5运营客服
				data: {},
            };
        },
        onLoad(option) {
			if (option.type) {
				this.type = option.type
			}
			if (option.role) {
				this.role = option.role
			}
			
			if (option.id) {
				this.id = option.id
				this.getData()
			}
            this.getSelect()
        },
        methods: {
			// 延时 优惠码
			delayed(item) {
				this.$ajax('staff_raise_coupon', {
				    userToken: this.$getSync('userToken'),
				    train_id: this.id,
					train_stat_id: item.id,
				}).then(ret => {
					if (ret.status == 0) {
				        this.$toast('提交成功')
						setTimeout(() => {
							this.getData()
						}, 500)
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			// 完成上课
			finishWork() {
				uni.showModal({
					title: '提示',
					content: '确认完成上课？',
					cancelText: '取消',
					confirmText: '确认完成',
					confirmColor: '#00b5bc',
					success: (res) => {
						if (res.confirm) {
							this.$ajax('staff_finish_train', {
							    userToken: this.$getSync('userToken'),
							    train_id: this.id,
							}).then(ret => {
								if (ret.status == 0) {
							        this.$toast('提交成功')
									setTimeout(() => {
										this.$backT()
									}, 500)
								} else {
									this.$toast(ret.message);
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			// 获取详情
			getData() {
				this.$ajax('staff_train_detail', {
				    userToken: this.$getSync('userToken'),
				    train_id: this.id,
				}).then(ret => {
					if (ret.status == 0) {
						// 0-'培训申请',1'待分配',2 '待回访',3'延迟课单' 4-未完成 5-已完成
						// 0培训申请、1待分配 可以修改，4外勤  不能修改
						// if (this.role == 4 || ret.data.status == 3 || ret.data.status == 4 || ret.data.status == 5) {
						// 	this.disabled = true
						// }
						if (this.role == 4 || ret.data.status > 0) {
							this.disabled = true
						}
						this.data = ret.data
						
						this.checked = ret.data.type == 0 ? false : true
				        this.cate = ret.data.category_name
				        this.cateId = ret.data.category_id
						this.region = [{
								name: ret.data.province_name,
								code: ret.data.province
							},
							{
								name: ret.data.city_name,
								code: ret.data.city
						}]//省市
						this.date = ret.data.train_date
						this.time = ret.data.train_time
						// 外勤
						this.outsides = ret.data.outsides
						this.test = ret.data.questions
						
						this.list = ret.data.con
						
						let now = new Date().getTime() //当前时间戳
						if (this.list && this.list.length > 0) {
							this.list.forEach(cur => {
								this.$set(cur, 'timeStatus', 1)//1未过期 2已过期
								
								let end = new Date(cur.end_time.replace(/-/g,'/')).getTime() //结束时间戳
								console.log('now',now, 'end',end,now > end)
								if (now > end) {
									cur.timeStatus = 2
								}
							})
						}
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			// 确认提交
			doSubmit() {
				if (!this.cateId) {
					this.$toast('请选择服务类型')
					return
				}
				if (this.region && this.region.length <= 0) {
					this.$toast('请选择省市')
					return
				}
				if (!this.date) {
					this.$toast('请选择培训日期')
					return
				}
				if (!this.time) {
					this.$toast('请选择服务时间')
					return
				}
				
				let qids = [], isNull = false, isNullPhone = false, obj = this.list[0]
				
				if (this.checked) {
					this.list.forEach(el => {
						if (!el.name || !el.industry_id || !el.attend_nums || !el.organizer || !el.mobile || !el.sex) {
							isNull = true
						}
						if (!this.$checkPhone(el.mobile)) {
							isNullPhone = true
						}
					})
				} else {
					if (!obj.name || !obj.industry_id || !obj.attend_nums || !obj.organizer || !obj.mobile || !obj.sex) {
						isNull = true
					}
					if (!this.$checkPhone(obj.mobile)) {
						isNullPhone = true
					}
				}
				if (isNull) {
					this.$toast('请将列表必填项填写完整')
					return
				}
				if (isNullPhone) {
					this.$toast('电话格式不正确')
					return
				}
				
				if (this.test && this.test.length > 0) {
					this.test.forEach(el => {
						qids.push(el.id)
					})
				}
				if (qids.length <= 0) {
					this.$toast('请选择表单题目')
					return
				}
				
				this.$ajax('staff_add_trains', {
				    userToken: this.$getSync('userToken'),
					type: this.checked == true ? 1 : 0,
					category_id: this.cateId,
					province: this.region[0].code,
					city: this.region[1].code,
					train_date: this.date,
					train_time: this.time,
					outside_id: '',
					questions_ids: qids.join(','),
					id: '',
					con: this.list,
					//[{name:'一诺科技',address:'',industry:'',attend_nums:'',unit_nums:'',organizer:'',
					//mobile:'',sex:'',title:'',section:'',inside:'',id:0,coupon:''}]
				}).then(ret => {
					if (ret.status == 0) {
						this.$toast('提交成功')
						setTimeout(() => {
							this.$backT()
						}, 500)
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			// 选题
			chooseQues(item) {
				item.isSelect = !item.isSelect
			},
			confirmQuestion() {
				let list = []
				if (this.quesList && this.quesList.length > 0) {
					this.quesList.forEach(el => {
						if (el.isSelect) {
							list.push(el)
						}
					})
				}
				
				if (this.test && this.test.length <= 0) {
				    console.log('1111111')
				    this.test = list
				} else {
				    console.log('2222222')
				    this.test.forEach((cur, index) => {
				        list.forEach((el, eli) => {
				            if (cur.id == el.id) {
				                list.splice(eli, 1)
				            }
				        })
				    })
				    this.test = [...this.test, ...list]
				}
				console.log('33333',this.test)
				
				this.show_8 = false
				
				if (this.quesList && this.quesList.length > 0) {
					this.quesList.forEach(el => {
						el.isSelect = false
					})
				}
			},
			
			delQues(index) {
				this.test.splice(index, 1);
			},
			
			open(num) {
				if (!this.disabled) {
					if (num == 1) {
						this.show_1 = true
					} else if (num == 3) {
						this.show_3 = true
					} else if (num == 4) {
						this.show_4 = true
					}
				}
			},
			
			// 所属行业
			openIndustry(item) {
				if (!this.disabled) {
					this.item = item
					this.show_5 = true
				}
			},
			confirmIndustry(e) {
				console.log(e)
				this.item.industry = e[0].label
				this.item.industry_id = e[0].value
			},
			
			// 性别
			openSex(item) {
				if (!this.disabled) {
					this.item = item
					this.show_6 = true
				}
			},
			confirmSex(e) {
				console.log(e)
				this.item.sex = e[0].label
			},
			
			// 内勤
			openInside(item) {
				if (!this.disabled) {
					this.item = item
					this.show_7 = true
				}
			},
			confirmInside(e) {
				console.log(e)
				this.item.inside = e[0].label
				this.item.inside_id = e[0].value
			},
			
			
			// 选择服务时间
			confirmTime(e) {
				console.log(e)
				this.time = e[0].value + ':' + e[1].value
			},
			
			// 选择培训日期
			confirmDate(e) {
				console.log(e)
				this.date = e.year + '-' + e.month + '-' + e.day
			},
			
			//选择地区
			handleGetRegion(region) {
			    console.log(region);
			    this.region = region;
			},
			
			// 选择服务类型
			confirmCate(e) {
				console.log(e)
				this.cate = e[0].label
				this.cateId = e[0].value
			},
			
			// 切换云课堂
            change(status) {
				console.log(status);
				this.checked = status
			},
			
			//删除
			del(index) {
			    this.list.splice(index, 1);
			},
			//添加
			add() {
			    this.list.push({name:'',address:'',industry:'',industry_id:'',attend_nums:'',unit_nums:'',organizer:'',mobile:'',sex:'女',
						title:'',section:'',inside:'',inside_id:'',id:0,coupon:''});
			},
			
			// 获取下拉选项
			getSelect() {
				this.$ajax('staff_get_industry', {
			        userToken: this.$getSync('userToken'),
			    }).then(ret => {
					if (ret.status == 0) {
						this.cateList = ret.data.category
			            this.industryList = ret.data.industry
						this.insideList = ret.data.inside
						this.quesList = ret.data.questions
						if (this.quesList && this.quesList.length > 0) {
							this.quesList.forEach(cur => {
								this.$set(cur,'isSelect',false)
							})
						}
					} else {
						this.$toast(ret.message);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
	.item-r-text{
		flex: 1;
		text-align: right;
		padding-left: 20rpx;
	}
	.select {
		flex: 1;
	    display: flex;
		justify-content: flex-end;
	    align-items: center;
	    // height: 100upx;
	}
	.adr-box {
	    // width: 76vw;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	}
	.adr-box > view {
	    width: 100%;
	    font-size: 28upx;
		text-align: right;
	}
	.place {
	    font-size: 28upx;
	    color: #787878;
	    // margin-right: 10upx;
	}
	
    page{
        background-color: #f5f5f5;
    }
	.content{
		padding: 20rpx;
	}
	
	.top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		font-size: 34rpx;
		color: #00b7bd;
	}
	.icon{
		width: 46rpx;
		height: 32rpx;
		margin-right: 12rpx;
	}
	
	.box{
		padding: 0 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #e6e6e6;
	}
	.border-b{
		border-bottom: 2rpx solid #00b7bd;
	}
	.item:last-child{
		border-bottom: none;
	}
	.item-r{
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.inp{
		flex: 1;
		text-align: right;
		padding-left: 20rpx;
		font-size: 28rpx;
	}
	.btns{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-bottom: 35rpx;
	}
	.btn2{
		padding: 14rpx 50rpx;
		border-radius: 50rpx;
		box-sizing: border-box;
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #00b7bd;
		background-color: #fff;
		border: 2rpx solid #00b7bd;
	}
	
	.del-2{
		width: 138rpx;
		height: 63rpx;
		margin-left: 30rpx;
	}
	
	.title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20rpx;
		font-size: 34rpx;
		font-weight: bold;
	}
	.c-btn{
		font-size: 30rpx;
		font-weight: normal;
		color: #fff;
		padding: 14rpx 40rpx;
		background-color: #ff8b28;
		border-radius: 10rpx;
	}
	.q-item{
		margin-bottom: 30rpx;
	}
	.ques{
		flex: 1;
		font-size: 28rpx;
		color: #536384;
		white-space: pre-line;
		word-break: break-all;
		padding-bottom: 15rpx;
	}
	.del{
		width: 34rpx;
		height: 34rpx;
		margin-left: 20rpx;
	}
	.q-dowm{
		padding: 0 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.answer{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #e6e6e6;
	}
	.answer:last-child{
		border-bottom: none;
	}
	.choose-1{
		width: 35rpx;
		height: 35rpx;
		margin-right: 25rpx;
	}
	.answer-text{
		flex: 1;
		font-size: 28rpx;
		white-space: pre-line;
		word-break: break-all;
	}
	.btn{
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		padding: 25rpx;
		margin: 70rpx 0;
		background: #01b8bd;
		border-radius: 50rpx;
	}
	
	.pop-up{
		padding: 30rpx;
	}
	.pop-ques{
		flex: 1;
		font-size: 28rpx;
		color: #536384;
		white-space: pre-line;
		word-break: break-all;
	}
	.pop-btn{
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		padding: 25rpx;
		margin-top: 30rpx;
		background: #01b8bd;
		border-radius: 50rpx;
	}

</style>
